import { useEffect } from 'react';
import { useModel } from 'umi';
import { Camera } from '@/utils/three/xThree';
import './index.less';

const Compass = () => {
  const { panoramaData } = useModel('Panorama.data', (ret) => ({
    panoramaData: ret.panoramaData,
  }));

  const resetView = () => {
    let cameraPosition = JSON.parse(panoramaData?.ems_panorama_initview || '0'); // 相机初始坐标
    Camera.resetCamera(cameraPosition, 50);
  };

  useEffect(() => {
    if (window.viewer) {
      Camera.getCameraTheta(window.viewer, (theta) => {
        if (theta) {
          const compass: any = document.getElementById('compass');
          compass.style.transform = 'rotateZ(' + theta + 'deg)';
        }
      });
    }
  }, [window.viewer]);

  return (
    <div className="compassBox" onClick={resetView}>
      <div className="compass" id="compass"></div>
    </div>
  );
};

export default Compass;
